<script setup lang="ts">
    // This starter template is using Vue 3 <script setup> SFCs
    // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
    // import HelloWorld from './components/HelloWorld.vue'
    const isDark = useDark()
    const toggleDark = useToggle(isDark)
</script>

<template>
    <img class="mx-auto x-4 y-2" alt="Vue logo" src="~@/assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
    <button class="icon-btn mx-2 !outline-none" @click="toggleDark()">
        <carbon-moon v-if="isDark" />
        <carbon-sun v-else />
    </button>
    <nav>
        <router-link class="mx-5 text-red-500 dark:text-blue-400" to="/">Home</router-link>
        |
        <router-link class="mx-5" to="/about">About</router-link>
    </nav>
    <router-view />
</template>

<style>
    #app {
        margin-top: 60px;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        color: #2c3e50;
        text-align: center;
    }
</style>
